<template>
  <div id="message">

    <div v-if='pageType!="baoming"' style="position:  relative;padding-bottom: 64px;">
      <x-header :left-options="{backText: ''}" style="max-width:850px;color: white;position: fixed;top: 20;width:  100%;z-index:1" title="use prop:title">
        <span slot="overwrite-title">{{title}}</span>

        <a href="./#/racelist" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>
      </x-header>
    </div>
    <view-box ref="viewBox">
      <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>



      <!-- <Messagedetail v-if='JSON.stringify(message) != "{}"' :msg='message'></Messagedetail> -->

      <my-list v-if='!!isShow' v-for="(item,index) in this.listData" :index="index" :lists="item" :key="item.id">
      </my-list>

      <!-- <ShowMessage  v-show='indexList.length!=0' v-for='(item,index) in indexList' :index11='index' :key='index' :data1='item' :idnumber='indexNumber' :type='"user"' :userKey="item._key"></ShowMessage> -->

    </view-box>

    <div v-if='pageType=="baoming"' class=''>
      <div id="tabbar" class='needsclick'>
        <div class="button_header" id='x-bottom'>
          <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="立即报名" @on-click-title='go("list")'>
            <span slot='overwrite-left'></span>

          </x-header>
          <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
        </div>
      </div>
    </div>

    <myFooter v-if='pageType!="baoming"' style="position: fixed;
    bottom: 0;width:100vw"></myFooter>

  </div>
</template>


<script type="text/ecmascript-6">
//let host = "http://jiangtao.v3.ihuipao.com/";
/* eslint-disable*/
import mixin from "@/common/js/mixin.js";
import MyList from "@/common/components/messagelist.vue";
import Messagedetail from "@/common/components/messagedetail.vue";

import Myheader from "@/common/components/myheader.vue";
import myFooter from "@/common/components/myfooter.vue";
import { setTitle, isIdNumber } from "@/common/js/main.js";
import Bus from "@/common/js/bus.js";
import {
  CheckIcon,
  XButton,
  Group,
  Cell,
  ViewBox,
  XHeader,
  cookie,
  XInput
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      haha: false,
      message: {},
      isShow: false,
      listData: [],
      lists: {},
      showContent001: false,
      item003: false,
      more: this.$t("message.more"),
      less: this.$t("message.less"),
      raceid: "",
      idnum: "",
      eventid: "",
      buttonFlag: true
    };
  },
  beforeCreate() {},
  created() {
    Bus.$on("refresh", target => {
      location.reload();
    });

    this.pageType = window.localStorage.getItem("pageType");

    let _this = this;

    if (!!this.$route.query.race_id && !!this.$route.query._key) {
      this.axios
        .post(
          `${window.host}registration/show`,
          qs.stringify({
            id: this.$route.query._key,
            full: 1
          })
        )
        .then(response => {
          if (response.data.code == 200) {
           
            
            this.haha = true;
            this.message = response.data.data;
            console.log(this.message)
            this.idnum = cookie.get("idnum");
            _this.userApply1();
            
            //this.listData = response.data.data;
          } else {
          }
        });

      //
    }
    

    // if (
    //   !!cookie.get("idnum") &&
    //   window.localStorage.getItem("isLogin") == "false"
    // ) {
    //   this.raceid = this.$route.query.race_id;
    //   this.idnum = cookie.get("idnum");

    //   this.userApply1();
    // }

    // if (!!cookie.get("idnum")) {
    //   this.raceid = this.$route.query.race_id;
    //   this.idnum = cookie.get("idnum");

    //   this.userApply1();
    // }

    if (window.location.hostname.indexOf("en") == 0) {
      this.$i18n.locale = "EN";
    }
    //console.log(window.localStorage.getItem("isQuery") == "true");
    if (
      //如果没有_sid就去登录
      !!(
        typeof cookie.get("_sid") == "undefined" ||
        window.localStorage.getItem("isLogin") == "false" ||
        window.localStorage.getItem("isQuery") == "true"
      )
    ) {
      this.title = "报名查询";
      setTitle(this.title);
      this.isShow = false;
      this.raceid = this.$route.query.race_id;
    } else {
      this.title = "我的报名";
      setTitle(this.title);
      //区分从那个入口进来的 new 登录之后用户中心
      window.localStorage.setItem("message", "new");
      this.raceid = this.$route.query.race_id;
      this.idnum = window.localStorage.getItem("idnum");

      this.userApply();
    }

  },
  methods: {
    go(link) {
      this.$router.push(link);
    },
    search() {
      //http://wechat.ihuipao.com/registration/fetch
      this.axios
        .post(
          `${window.host}registration/fetch`,
          qs.stringify({
            raceid: this.raceid,
            idnum: this.idnum
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            //this.userApply()
            //alert(1)
            this.listData = response.data.data;

            //mock
            this.isShow = true;
            this.listData[0].editable = 1;

            if (this.listData.length == 0) {
              this.$vux.toast.show({
                type: "warn",
                text: this.$t("index.nofound")
              });
            }
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    isIdNumber: function(value) {
      this.buttonFlag = !isIdNumber(value) && this.code != "";
      return {
        valid: isIdNumber(value),
        msg: "请输入正确的证件号"
      };
    },
    //获取用户信息
    _getUserMessage() {
      let _this = this;
      //mock!!!  4号数据没有 改成5号
      /*   if (this.eventId == 4) {
         this.eventId = 5
         }*/
      //mock!!! 结束
      return this.axios
        .post(
          `${host}user/auth/regitration`,
          qs.stringify({
            account: window.localStorage.getItem("account")
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            //console.log(response.data.data.idnum);
            window.localStorage.setItem("idnum", response.data.data.idnum);
            this.userApply();
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    userApply1() {
      var config = {};
      if (!!this.eventid) {
        config.idnum = this.idnum;
        config.eventid = this.eventid;
      } else {
        config.idnum = this.idnum;
        config.raceid = this.raceid;
      }
      this.axios
        .post(`${window.host}registration/fetch`, qs.stringify(config))
        .then(response => {
          //console.log(JSON.stringify(response))
          //var response ={"data":{"code":"200","msg":"success","data":[{"id":74144,"refundable":1,"_key":"5a4c7d9e56494","orderid":"5a4c7da4d147a","eventid":"5","bib":null,"idtype":"passport","state":"normal","wait_pos":0,"idnum":"32092220","name":"chen","enname":null,"birth":"1990-01-01","gender":"male","mobile":"+86-18912489053","email":"12@qq.com","blood":"B","cloth":"XL","emername":"chen","emertel":null,"national":"003","country":"001081","province":null,"city":null,"pay_at":"2018-01-03 14:54:19","refundid":0,"created_at":"2018-01-03 14:52:14","updated_at":"2018-01-03 14:54:19","deleted_at":null,"address":"ggf","emermobile":"+86-15261535024","text-1514473466789":"chen","file-1514473485996":["image/jpeg/4c9fb764ba6a286ea4f7cdf9bac28c87.png"],"_sid":"123","_lang":"en","payable":1}]},"status":200,"statusText":"OK","headers":{"content-type":"text/html; charset=UTF-8","cache-control":"no-cache, private"},"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/x-www-form-urlencoded"},"method":"post","url":"http://api.ihuipao.com/registration/fetch","data":"idnum=32092220&eventid=5&_sid=123&_lang=zh-cn"},"request":{}};
          if (response.data.code == "200") {
            this.listData = response.data.data;
            //console.log(this.listData);
            this.isShow = true;

            //mock

            //this.listData[0].editable=1

            if (this.listData.length == 0) {
              this.$vux.toast.show({
                type: "warn",
                text: this.$t("index.nofound"),
                onHide() {
                  console.log(this.page);
                  window.location.href =
                    "//" +
                    window.location.host +
                    "/baoming/" +
                    _this.page.raceid +
                    "#/";
                }
              });
            }
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    getinfo() {
      //获取 报名表单的vlue
      //http://jiangtao.v3.ihuipao.com/user/auth/regitration
      this.axios
        .post(
          `${host}user/auth/regitration`,
          qs.stringify({
            account: window.localStorage.getItem("account")
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            console.log(response.data.data.idnum);
            window.localStorage.setItem("idnum", response.data.data.idnum);
            //获取报名表单的value
            this.userApply();
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    },
    userApply() {
      this.axios
        .post(
          `${host}user/auth/regitration`,
          qs.stringify({
            account: window.localStorage.getItem("account"),
            //idnum: window.localStorage.getItem("idnum"),
            //raceid: this.page.raceid
            raceid: this.$route.query.race_id
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.isShow = true;
            this.listData = response.data.data;
            //console.log(this.listData);
            //mock

            this.listData[0].editable = 1;

            if (this.listData.length == 0) {
              this.$vux.toast.show({
                type: "warn",
                text: this.$t("index.nofound")
              });
            }
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
          }
        });
    }
  },
  components: {
    Messagedetail,
    XInput,
    XHeader,
    myFooter,
    MyList,
    Group,
    Cell,
    XButton,
    ViewBox,
    Myheader
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#message .slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}

#message p {
  color: #999;
}

#message .animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}

#message .list-box {
  height: 90px;
  overflow: hidden;
  border-top: 1px solid #d9d9d9;
  // border-bottom:1px solid #D9D9D9;
}

#message .refundBtn {
  float: right;
  margin: 10px 15px;
}

#message .more-btn {
  color: #1aad19;
  background-color: #fff;
}

#message + div .ad {
  display: block;
}

#message .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#message h2 {
  font-size: 30px;

  text-align: center;
  color: #25a2ff;
  margin-top: 0;
}

#message .footerBanner {
  margin-bottom: 50px;
  position: absolute;
  bottom: 0px;
}

#message .index-topf {
  margin-bottom: 100px;
  padding-top: 15px;
}

#message #type_baoming img {
  max-width: 100%;
}
</style>






